<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>深度监视</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>

    </style>
</head>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <h3>今天天气很{{weather}}</h3>
    <button @click="changeWeather">切换天气(计算属性)</button>
    <hr>
    <h3>a的值是{{numbers.a}}</h3>
    <button @click="numbers.a++">点我a++</button>
    <hr>
    <h3>b的值是{{numbers.b}}</h3>
    <button @click="numbers.b++">点我b++</button>
    <button @click="numbers={a:6656,b:888}">点我替换numbers</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '培立优',
            isHot: true,
            numbers:{
                a:1,
                b:2,
            }
        },
        computed: {
            weather() {
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                // 是否在初始化时调用
                immediate: true,
                // isHot发生改变时候调用
                handler(newValue, oldValue) {
                    console.log('isHot变了', newValue, oldValue);
                }
            },
            // 监视多级结构中的某一个属性
            'numbers.a':{
                handler(){
                    console.log('a变了')
                }
            },
            numbers:{
                deep:true,//监视多级结构中所有属性的变化
                handler(newValue, oldValue){
                    //console.log('change numbers',newValue,oldValue);
                }
            },
            // 简写 只有handler时
            'numbers.b'(){
                console.log('b改变了')
            }
        }
    });

    vm.$watch('weather', {
        immediate: true,
        handler(newValue, oldValue) {
            console.log('weather变了', newValue, oldValue);
        }
    });
</script>

</html>